<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
	<title>zyplayer-doc-db</title>
	<link rel="shortcut icon" href="webjars/doc-db/img/api.ico"/>
	<link rel="stylesheet" href="webjars/zui/css/zui.min.css" />
	<link rel="stylesheet" href="webjars/zui/css/zui-theme.min.css">
	<link rel="stylesheet" href="webjars/zui/lib/chosen/chosen.min.css" />
	<link rel="stylesheet" href="webjars/doc-db/css/doc-db.css" />
</head>
<body>
	<div class="container">
		<div class="row choise-db">
			<div class="col-md-3">
				<select id="choiseHost" data-placeholder="选择一个连接" class="chosen-select form-control" tabindex="2">
					<option value=""></option>
				</select>
			</div>
			<div class="col-md-3">
				<select id="choiseDatabase" data-placeholder="选择一个数据库" class="chosen-select form-control" tabindex="2">
					<option value=""></option>
				</select>
			</div>
			<div class="col-md-3">
				<select id="choiseTable" data-placeholder="选择一张表" class="chosen-select form-control" tabindex="2">
					<option value=""></option>
				</select>
			</div>
			<div class="col-md-3">
				<button class="btn btn-primary" type="button" id="fuzzySearchBtn">模糊查询</button>
				<button class="btn btn-primary" type="button" id="exportBtn">导出</button>
				<button class="btn" type="button" id="showEchartsBtn">显示表关系图</button>
			</div>
		</div>
		<div class="table-info">
			<div>表名：<span class="table-name"></span></div>
			<div class="desc">
				<div id="tableDescShow">
					<span class="table-desc"></span>
					<i class="icon icon-edit" title="编辑表注释"></i>
				</div>
				<textarea id="tableDescInput" rows="2" class="form-control"></textarea>
			</div>
		</div>
		<div class="table-columns">
			<table class="table table-bordered table-striped table-hover" id="tableCloumnsTable">
				<thead>
					<tr><th>字段名</th><th>自增</th><th>类型</th><th>长度</th><th>NULL</th><th>主键</th><th>注释</th></tr>
				</thead>
				<tbody></tbody>
			</table>
		</div>
		<div id="tableRelationBox" class="hide" style="width: 100%;height:100px;">
			<div class="alert alert-warning alert-dismissable">
				<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
				<p>
					Tips：本关系图不是通过外键生成，所以需要在字段注释最后按规则添加外键关系才能生成图表，支持的格式有：<br/>
					1、T:表，例：XXX(字段注释)，T:user_info<br/>
					2、T:表.关联ID，例：XXX(字段注释)，T:user_info.id<br/>
					3、T:库.表.关联ID，例：XXX(字段注释)，T:order_db.user_info.id<br/>
					实验功能，有更好的建议或展示方式欢迎<a target="_blank" href="https://gitee.com/zyplayer/zyplayer-doc-db">提交建议</a>！
				</p>
			</div>
			<div id="tableRelationCharts" style="width: 100%;height:100%;margin-bottom: 50px;"></div>
		</div>
		<!-- 模糊查询 -->
		<div class="modal fade" id="fuzzySearchModal">
			<div class="modal-dialog modal-lg">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">×</span><span class="sr-only">关闭</span>
						</button>
						<h4 class="modal-title">通过字段名或释义模糊查询</h4>
					</div>
					<div class="modal-body">
						<div class="row choise-db">
							<div class="col-md-3">
								<select id="choiseFuzzyHost" data-placeholder="选择一个连接" class="chosen-select form-control" tabindex="2">
									<option value=""></option>
								</select>
							</div>
							<div class="col-md-3">
								<select id="choiseFuzzyDatabase" data-placeholder="选择一个数据库" class="chosen-select form-control" tabindex="2">
									<option value=""></option>
								</select>
							</div>
							<div class="col-md-4">
								<input id="searchText" type="text" class="form-control" placeholder="搜索内容，字段名或注释">
							</div>
							<div class="col-md-2">
								<button id="doSearch" class="btn btn-primary" type="button">查询 <i class="icon icon-spin icon-spinner-snake hidden"></i></button>
							</div>
						</div>
						<div class="modal-table-box">
							<table class="table table-bordered table-striped table-hover" id="fuzzySearchTable">
								<thead>
									<tr><th>表名</th><th>字段名</th><th>注释</th></tr>
								</thead>
								<tbody></tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 导出弹出框 -->
		<div class="modal fade" id="exportModal">
			<div class="modal-dialog modal-lg">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">×</span><span class="sr-only">关闭</span>
						</button>
						<h4 class="modal-title">导出数据库文档</h4>
					</div>
					<div class="modal-body">
						<div class="row choise-db">
							<div class="col-md-3">
								<select id="choiseExportHost" data-placeholder="选择一个连接" class="chosen-select form-control" tabindex="2">
									<option value=""></option>
								</select>
							</div>
							<div class="col-md-3">
								<select id="choiseExportDatabase" data-placeholder="选择一个数据库" class="chosen-select form-control" tabindex="2">
									<option value=""></option>
								</select>
							</div>
							<div class="col-md-6">
								<button id="doExport" class="btn btn-primary" type="button">确认导出 <i class="icon icon-spin icon-spinner-snake hidden"></i></button>
								<button id="checkAllTable" class="btn" type="button">全选</button>
								<button id="notCheckAllTable" class="btn" type="button">全不选</button>
							</div>
						</div>
						<div class="alert alert-danger">
							请到 <a target="_blank" href="https://gitee.com/zyplayer/zyplayer-doc-db">源码处下载</a>《对外文档模板.zip》解压，
							然后将“确认导出”后的文件放至/js目录下，文件名必须为：database.js<br/>
							然后双击打开目录下的：doc-db.html 即可看到导出的文档
						</div>
						<div class="modal-table-box">
							<ul id="exportUl"></ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="webjars/doc-db/js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="webjars/zui/js/zui.min.js"></script>
<script type="text/javascript" src="webjars/zui/lib/chosen/chosen.min.js"></script>
<script type="text/javascript" src="webjars/doc-db/js/echarts.min.js"></script>

<script type="text/javascript" src="webjars/doc-db/js/option-table-relation.js"></script>
<script type="text/javascript" src="webjars/doc-db/js/formatjson.js"></script>
<script type="text/javascript" src="webjars/doc-db/js/toast.js"></script>
<script type="text/javascript" src="webjars/doc-db/js/common.js"></script>
<script type="text/javascript" src="webjars/doc-db/js/doc-db.js"></script>
</html>

